<template>
  <div class="container">
    <!-- 顶部搜索栏 -->
    <div class="search-bar">
      <el-input 
        v-model="searchForm.socialCreditCode"
        placeholder="请输入" 
        class="input-credit-code" 
      >
        <template v-slot:prepend>社会信用代码</template>
      </el-input>
      <el-input 
        v-model="searchForm.companyName"
        placeholder="请输入" 
        class="input-company-name" 
      >
        <template v-slot:prepend>企业名称</template>
      </el-input>
      <el-button type="primary" class="button-search" @click="handleSearch">搜索</el-button>
      <el-button class="button-reset" @click="handleReset">重置</el-button>
    </div>
    
    <!-- 企业总数提示区 -->
    <p class="summary-text">共监测企业 <span class="highlighted-text">{{ pagination.total }}</span> 家</p>
    
    <!-- 企业卡片列表区 -->
    <div class="card-list-container">
      <div 
        v-for="(item, index) in cardList" 
        :key="index" 
        class="company-card"
      >
        <div class="card-header">
          <i class="icon-company el-icon-office-building"></i>
          <span class="company-name">{{ item.companyName }}</span>
          <i class="icon-status el-icon-circle-check"></i>
        </div>
        <p class="credit-code">统一社会信用代码：{{ item.socialCreditCode }}</p>
        <div class="card-stats">
          <div class="risk-stats">
            <span class="stats-label">风险数</span>
            <span class="risk-number">{{ item.riskNum }}</span>
            <i class="icon-arrow-up"></i>
          </div>
          <div class="benefit-stats">
            <span class="stats-label">利好数</span>
            <span class="benefit-number">{{ item.positiveNum }}</span>
          </div>
        </div>
        <div class="card-footer">
          <span class="alert-time">最新预警时间：{{ item.latestWarningTime }}</span>
          <el-button class="button-cancel-monitor" @click="handleCancelMonitor(index, item)">取消监控</el-button>
        </div>
      </div>
    </div>
    
    <!-- 底部分页栏 -->
    <div class="pagination-container">
      <el-pagination
        :page-sizes="pagination.sizes"
        :page-size="pagination.size"
        :current-page="pagination.current"
        layout="sizes, prev, pager, next"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div></template><script>
import { getEnterpriseCardList } from '@/api/EnterpriseRiskAPI'

export default {
  data() {
    return {
      // 搜索表单数据
      searchForm: {
        socialCreditCode: '',
        companyName: ''
      },
      // 企业卡片列表数据
      cardList: [],
      // 分页数据
      pagination: {
        total: 0,
        current: 1,
        size: 16, // 默认每页16条数据
        sizes: [16, 32, 48, 64]
      }
    };
  },
  created() {
    // 页面初始化时调用查询接口获取卡片列表数据
    this.fetchCardList();
  },
  methods: {
    // 获取企业卡片列表数据
    async fetchCardList() {
      try {
        const params = {
          socialCreditCode: this.searchForm.socialCreditCode,
          companyName: this.searchForm.companyName,
          pageNo: this.pagination.current,
          pageSize: this.pagination.size
        };
        
        const response = await getEnterpriseCardList(params);
        
        // 更新卡片列表数据
        this.cardList = response.list || [];
        
        // 更新分页信息
        this.pagination.total = response.total || 0;
        // this.pagination.current = response.current || 1;
        // this.pagination.size = response.size || 16;
        
        // 更新企业总数提示
        this.updateSummaryText();
      } catch (error) {
        console.error('获取企业卡片列表数据失败:', error);
        this.$message.error('获取数据失败');
      }
    },
    
    // 搜索按钮点击事件
    handleSearch() {
      this.pagination.current = 1; // 重置到第一页
      this.fetchCardList();
    },
    
    // 重置按钮点击事件
    handleReset() {
      this.searchForm.socialCreditCode = '';
      this.searchForm.companyName = '';
      this.pagination.current = 1; // 重置到第一页
      this.fetchCardList();
    },
    
    // 分页大小改变事件
    handleSizeChange(size) {
      this.pagination.size = size;
      this.pagination.current = 1; // 重置到第一页
      this.fetchCardList();
    },
    
    // 当前页改变事件
    handleCurrentChange(current) {
      this.pagination.current = current;
      this.fetchCardList();
    },
    
    // 取消监控按钮点击事件
    handleCancelMonitor(index, item) {
      this.$confirm('确定要取消对该企业的监控吗？', '确认取消监控', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 这里可以调用取消监控的接口
        this.$message.success('已取消监控');
      }).catch(() => {
        // 用户点击取消按钮
        this.$message.info('已取消操作');
      });
    },
    
    // 更新企业总数提示
    updateSummaryText() {
      // 通过DOM操作更新总数显示
      this.$nextTick(() => {
        const summaryElement = document.querySelector('.highlighted-text');
        if (summaryElement) {
          summaryElement.textContent = this.pagination.total;
        }
      });
    }
  }
};</script><style lang="scss" scoped>
.container {
  background-color: #F5F7FA;
  padding: 16px 32px;
  font-family: "Microsoft YaHei", sans-serif;
  height: 100%;
  overflow: auto;

  /* 顶部搜索栏样式 */
  .search-bar {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 16px;

    .input-credit-code,
    .input-company-name {
      width: 40%;
      height: 40px;
      background-color: #FFFFFF;
      border: 1px solid #E0E0E0;
      border-radius: 4px;
      margin-right: 16px;

      ::v-deep .el-input-group__prepend {
        background-color: #FFFFFF;
        border: none;
        color: #666666;
        font-size: 14px;
      }

      ::v-deep .el-input__inner {
        background-color: #FFFFFF;
        border: none;
        height: 40px;
        color: #333333;
        font-size: 14px;

        &::placeholder {
          color: #999999;
        }
      }
    }

    .button-search {
      width: 80px;
      height: 40px;
      background-color: #2196F3;
      border: none;
      border-radius: 4px;
      color: #FFFFFF;
      font-size: 14px;
      margin-right: 16px;
    }

    .button-reset {
      width: 80px;
      height: 40px;
      background-color: #FFFFFF;
      border: 1px solid #2196F3;
      border-radius: 4px;
      color: #2196F3;
      font-size: 14px;
    }
  }

  /* 企业总数提示区样式 */
  .summary-text {
    color: #666666;
    font-size: 14px;
    margin: 16px 0 24px 0;

    .highlighted-text {
      color: #666666;
      font-weight: bold;
    }
  }

  /* 企业卡片列表区样式 */
  .card-list-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 16px;

    .company-card {
      background-color: #FFFFFF;
      border: 1px solid #E0E0E0;
      border-radius: 8px;
      padding: 24px 16px;
      // height: 150px;
      display: flex;
      flex-direction: column;

      .card-header {
        display: flex;
        align-items: center;
        margin-bottom: 8px;

        .icon-company {
          width: 32px;
          height: 32px;
          background-color: #2196F3;
          border-radius: 50%; /* 圆形展示 */
          margin-right: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-size: 18px;
        }

        .company-name {
          color: #333333;
          font-size: 16px;
          flex-grow: 1;
        }

        .icon-status {
          color: #4CAF50;
          font-size: 18px;
          margin-left: 8px;
        }

        .icon-warning {
          width: 16px;
          height: 16px;
          background-color: #F44336;
          clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        }
      }

      .credit-code {
        color: #999999;
        font-size: 14px;
        margin: 8px 0;
        flex-grow: 1;
      }

      .card-stats {
        display: flex;
        // align-items: center;
        margin: 18px 0;

        .benefit-stats {
          margin-left: 30%;
        }
          
        .risk-stats,
        .benefit-stats {
          display: flex;

          .stats-label {
            color: #666666;
            font-size: 14px;
            margin-right: 4px;
          }

          .risk-number {
            color: #FF9800; /* 橙色 */
            font-size: 16px;
            font-weight: bold;
          }

          .icon-arrow-up {
            width: 0;
            height: 0;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-bottom: 8px solid #FF9800; /* 橙色 */
            margin-left: 4px;
          }

          .benefit-number {
            color: #2196F3;
            font-size: 16px;
            font-weight: bold;
          }

          .icon-arrow-up {
            width: 0;
            height: 0;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-bottom: 8px solid #F44336;
            margin-left: 4px;
          }
        }
      }

      .card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .alert-time {
          color: #999999;
          font-size: 12px;
        }

        .button-cancel-monitor {
          width: 100px;
          height: 38px;
          background-color: #FFFFFF;
          border: 1px solid #2196F3;
          border-radius: 4px;
          color: #2196F3;
          font-size: 14px;
        }
      }
    }
  }

  /* 底部分页栏样式 */
  .pagination-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 16px;

    ::v-deep .el-pagination {
      display: flex;
      align-items: center;

      .el-pagination__sizes {
        margin-right: 16px;

        .el-select .el-input {
          width: 120px;
          height: 30px;

          .el-input__inner {
            height: 30px;
            background-color: #FFFFFF;
            border: 1px solid #E0E0E0;
            border-radius: 4px;
            color: #333333;
            font-size: 14px;
          }
        }
      }

      .btn-prev,
      .btn-next,
      .el-pager li {
        width: 30px;
        height: 30px;
        min-width: 30px;
        line-height: 30px;
        border-radius: 4px;
        margin: 0 4px;
        background-color: #FFFFFF;
        border: 1px solid #E0E0E0;
        color: #333333;
        font-size: 14px;
        text-align: center;

        &.active {
          background-color: #2196F3;
          border-color: #2196F3;
          color: #FFFFFF;
        }
      }
    }
  }
}</style>